import React from 'react'
import { RiCheckFill, RiFlashlightLine, RiFlashlightFill } from '@remixicon/react'
import { useNavigate } from 'react-router-dom'
import CheckList from '@/library/gallery/components/CheckList'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const CheckListDemo: React.FC = () => {
  const navigate = useNavigate()
  return (
    <>
      <DemoBlock title="基础用法">
        <CheckList defaultValue={['B']}>
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
          <CheckList.Item value="C" disabled>disabled</CheckList.Item>
          <CheckList.Item value="D" readOnly>readOnly</CheckList.Item>
          <CheckList.Item onClick={() => navigate('../switch')} isLink>Go Switch</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="多选">
        <CheckList multiple defaultValue={['B', 'C']}>
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
          <CheckList.Item value="C">C</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="自定义选中图标">
        <CheckList multiple activeIcon={<RiCheckFill />} defaultValue={['B']}>
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
          <CheckList.Item value="C">C</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="自定义列表右侧区域">
        <CheckList
          extra={(active) => (active ? <RiFlashlightFill /> : <RiFlashlightLine />)}
          defaultValue={['B']}
        >
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
          <CheckList.Item value="C">C</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="整组只读">
        <CheckList defaultValue={['B']} readOnly>
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="整组禁用">
        <CheckList disabled>
          <CheckList.Item value="A">A</CheckList.Item>
          <CheckList.Item value="B">B</CheckList.Item>
        </CheckList>
      </DemoBlock>

      <DemoBlock title="整组外链">
        <CheckList isLink defaultValue={['B']}>
          <CheckList.Item onClick={() => navigate('../switch')}>Go Switch</CheckList.Item>
          <CheckList.Item onClick={() => navigate('../list')}>Go List</CheckList.Item>
          <CheckList.Item>Go Button</CheckList.Item>
        </CheckList>
      </DemoBlock>
    </>
  )
}

export default CheckListDemo

